<template>
  <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "FunnelEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "转化情况",
          type: "funnel",
          left: "10%",
          top: 60,
          bottom: 60,
          width: "80%", // 漏斗显示宽度

          min: 0,
          max: 100,
          minSize: "0%",
          maxSize: "100%",
          sort: "descending", // 排列顺序；descending:降序，ascending:升序
          gap: 2, // 漏斗每部分的间距

          //漏斗名称显示
          label: {
            show: true,
            position: "inside",
          },

          // 漏斗背景色和边界宽度
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 10,
          },

          // 鼠标悬停字体大小
          emphasis: {
            label: {
              fontSize: 25,
            },
          },

          data: [
            { value: 100, name: "注册" },
            { value: 90, name: "登录" },
            { value: 60, name: "加购" },
            { value: 20, name: "下单" },
            { value: 10, name: "付款" },
          ],
        },
      ];

      return {
        title: {
          text: "新用户注册至下单的转化情况",
          subtext: "漏斗图",
          left: "center",
        },
        // 提示框
        tooltip: {
          trigger: "item",
          formatter: "{a} <br />{b}: {c}%",
        },
        legend: {
          show: true,
          orient: "vertical", // 图例列表的布局朝向
          left: "left",
          // data中的数据类型必须要为string
          data: ["注册", "登录", "加购", "下单", "付款"],
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
